import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withRouter, Link} from 'react-router-dom';
import {Table, Pagination, Empty, Button, Popconfirm, message} from 'antd';
import action from '../../store/actions/codeLibrary';
import action2 from '../../store/actions/generatingGoods';
import Searchs from './Searchs';

import {delCodeLibrary, pushU8, pushPurchase} from '../../api';

import './CodeContentRight.scss';

class CodeContentRight extends Component {
  state = {
    page: 1,
    columns: [
      {
        title: '物料编码',
        dataIndex: 'invcode',
        key: 'invcode'
      }, {
        title: '名 称',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: '品 牌',
        dataIndex: 'brand',
        key: 'brand'
      }, {
        title: '型 号',
        dataIndex: 'specs',
        key: 'specs'
      },
      // {
      //   title: "计量单位",
      //   dataIndex: "main_measure",
      //   key: "main_measure"
      // },
      {
        title: '可用量',
        dataIndex: 'availqty',
        key: 'availqty'
      },
      {
        title: '库存量',
        dataIndex: 'qty',
        key: 'qty'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, dataIndex) =>
          <div className='operation'>
            <Button type="primary" ghost size="small" onClick={() => this.modify(dataIndex)}>修改</Button>
            <Popconfirm
              title="确定要删除吗？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => this.confirm(text, dataIndex)}
              onCancel={this.cancel}>
              <Button type="danger" ghost size="small">
                删除
              </Button>
            </Popconfirm>
            {/* <Link
              target='_blank'
              to={{
                pathname: `/generatingGoods/${JSON.stringify({
                  invcode: `${dataIndex.invcode}`,
                  cate_code: `${dataIndex.cate_code}`
                })}`
              }}>
              <Button type="primary" ghost size="small">生成商品</Button>
            </Link> */}
            {/*<Button type="danger" size="small" onClick={() => this.pushU8(dataIndex)}>推U8</Button>*/}
            {/*<Button type="danger" size="small" onClick={() => this.pushPurchase(dataIndex)}>推采购</Button>*/}
          </div>
      }
    ]
  };
  // 推送U8
  pushU8 = ({invcode}) => {
    pushU8(invcode).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  };
  // 推送采购
  pushPurchase = ({invcode}) => {
    pushPurchase(invcode).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  };

  onSearchValue = value => {
    const {cate_code, GET_CODELIBRARY_INFO} = this.props;
    GET_CODELIBRARY_INFO(cate_code, this.state.page, 10, value);
  };


  screen = value => {
    console.log(value);
  };

  add = data => {
    console.log(data);
  };

  modify = data => {
    console.log(data);
    this.props.IS_MODIFY(true);
    this.props.GET_SINGLE_CODE(data.invcode);
  };

  confirm = (text, dataIndex) => {
    console.log(dataIndex);
    delCodeLibrary(dataIndex.invcode).then(res => {
      this.props.GET_CODELIBRARY_INFO(this.props.cate_code, this.props.currentPage, 10);
    }).catch(err => {
      console.log(err);
    });
  };

  cancel = e => {
    message.error('Click on No');
  };

  onChange = async (page) => {
    const {cate_code, CURRENT_PAGE, GET_CODELIBRARY_INFO} = this.props;
    CURRENT_PAGE(page);
    GET_CODELIBRARY_INFO(cate_code, page, 10);
    this.setState({
      page
    });
  };

  render() {
    const dataSource = this.props.data.data;
    dataSource && dataSource.map(item => {
      item.key = item.id;
      return item;
    });
    const total = this.props.data.pageCount;

    return (
      <div className='CodeContentRight'>
        {
          this.props.isSelected
            ?
            <>
              <Searchs onSearchValue={this.onSearchValue}></Searchs>

              <div className='CodeContentRight__table'>
                <Table
                  dataSource={dataSource}
                  columns={this.state.columns}
                  pagination={false}
                  onChange={this.handleTableChange}
                />
              </div>

              < Pagination
                showTotal={total => `总数： ${total} 项`}
                current={this.props.currentPage}
                onChange={this.onChange}
                total={total ? +total : 1}
                style={{textAlign: 'center', marginTop: '20px'}}
                hideOnSinglePage
              />
            </>
            :
            <Empty description={'暂无数据...'}/>
        }
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    isSelected: state.codeLibrary.isSelected,
    data: state.codeLibrary.codeLibraryInfo,
    cate_code: state.codeLibrary.cate_code,
    currentPage: state.codeLibrary.currentPage
  };
};

export default connect(mapStateToProps, {...action, ...action2})(withRouter(CodeContentRight));
